<template>
  <el-dialog
    custom-class="set-money-type"
    v-el-drag-dialog="{ drag: true, full: false, resize: false }"
    :visible="true"
    :close-on-click-modal="false"
    @close="closeMd"
    title="设置金额类型"
    width="30%">
    <el-form 
      :model="fm.ps"
      :ref="fm.fname"
      :label-width="'100px'">
      <el-form-item
        label="金额类型"
        prop="mtIds"
        :rules="[{ required: true,  message: '请选择金额类型', trigger: 'blur' } ]">
        <el-select
          placeholder="请选择金额类型"
          multiple collapse-tags
          filterable clearable
          v-model="fm.ps.mtIds"
          @change="onChange" 
          style="width: 100%">
          <el-option 
            v-for="item in mTypesOptions" 
            :key="item.id" 
            :label="item.typeName" 
            :value="item.id+''">
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <el-row style="padding: 20px 20px 20px 40px;text-align: center">
      <el-button 
        icon="el-icon-circle-check" 
        type="primary" 
        :loading="fm.sb.load"
        @click="onSubmit">
        {{fm.sb.text}}
      </el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import elDragDialog from "@/directive/el-drag-dialog";
import {setMoneyType} from "@/api/services/personMan.service";
import {getMoneyTypeDict} from "@/api/services/common.service";

export default {
  name: "SetMoneyType",
  directives: {elDragDialog},
  props: ['myData'],
  data() {
    return {
      fm: {
        fname: 'setMoneyTypeFm',
        sb: {load: false, text: '确定'},
        ps: {
          id: this.myData.obj.id || '',
          mtIds: this.myData.obj.mtIds || [],
        }
      },

      mTypesOptions: [],
    };
  },
  mounted() {
    // 获取-所有金额类型列表
    getMoneyTypeDict().then(res => {
      let params = {id:'ALL', typeName:'全部'}
      res.mTypes.unshift(params);
      this.mTypesOptions = res.mTypes;
    });
  },
  created(){
    console.log('设置金额类型父级传入数据', this.myData);
  },
  methods: {
    closeMd() {
      this.$emit("myClick", {state: false});
    },
    // 金额类型-列表框-选择改变事件
    onChange(e) {
      const that = this;

      if(e.indexOf('ALL') > -1) {
        that.fm.ps.mtIds = that.mTypesOptions.map(item => item.id+'').filter(item => item !== 'ALL');
      }
    },
    onSubmit() {
      let that = this, U = that.U, fm = that.fm, ps = U.scopy(fm.ps);

      that.$refs[fm.fname].validate(valid => {
        if (valid) {
          // 参数处理
          ps.mtIds = ps.mtIds.join(',');
          setMoneyType(ps).then(res => {
            if(res.code != 1){
              U.qerror(res.msg);
            }else{
              U.qsuccess(res.msg);

              that.closeMd();
              that.$emit("reloadDg");
            }
          });
        }
      });
    }
  },

};
</script>